<script>
// 引入mapState, mapMutations辅助函数
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    xxx:()=>{},
    xx2x:()=>{},
    // 将store中的state展开合并到computed
    ...mapState({
      nums: (state)=>{
        return state.nums
      },
      isLogin:(state)=>{
        return state.user.isLogin
      }
    })
  },
  methods:{
    // 将store中的Mutations展开合并到methods
    ...mapMutations({
      cn: "change_nums"
    }),
    change(){
      // this.$store.commit("change_nums", 10)
      // 使用了辅助函数并展开到对应位置后的执行方式
      this.cn(10);
    }
  },
  mounted(){
    // 使用了辅助函数并展开到对应位置后的使用方式
    console.log( this.nums )
    console.log( this.isLogin )
    // console.log( this.$store.state.user.isLogin )
  }
}

</script>

<template>
  <div class="about">
    <h1>正在测试vuex --- CCCCCC页面 - 选项式 + 辅助函数</h1>
    <!-- <p>获取到的vuex的状态： {{ $store.state.nums }}</p> -->
    <!-- <p>获取到的vuex的计算属性： {{ $store.getters.sum }}</p> -->
    <p>获取到的vuex的状态： {{ nums }}</p> -->
    <p>获取到的vuex的计算属性： {{ isLogin }}</p>

    <el-button @click="change">改变状态</el-button>
  </div>
</template>

<style>
</style>
